<!DOCTYPE html>
<!-- 声明html5标准 -->
<html lang='zh'>
<!-- 这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站
对html页面本身不会有影响,这些现在都是html规范，你的页面越规范，就越容易被收录 -->

<head>
    <meta charset='UTF-8'>
    <!-- 声明使用UTF-8 Unicode编码，UTF-8编码优先采用的编码 -->
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <!--  X-UA-Compatible是针对IE新加的一个设置 声明兼容到edge -->
    <meta name='viewport' content='width=device-width, initial-scale=no'>
    <!--width:可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 -->
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- v-for  使用数组的情况-->
        <!-- vue 2.2版本后, 为什么要用key属性: 1:为了提高渲染效率. 2:为了防止元素发生改变时,页面发生错乱-->
        <!-- key值必须是唯一的
         -->
        <div v-for="(item,index) in list" :key="index">
           {{item.name}} 
           {{index}}
        </div>
        <!-- 当遍历对象时, 会多一个key属性 一次 -->
        <div v-for="(key,value,index) in obj" :key="index+10">
            value:{{value}} <br>
            key:{{key}} <br>
            index: {{index}}
            <hr>
        </div>
        <!-- 直接遍历数字 -->
        <div v-for="item in 10" :key="item+10000">
            <img src="https://online-course.nos-eastchina1.126.net/74e025f97cc04d5d8d76cc8b426b8dab.png" alt="">
        </div>
    </div>
</body>
<script>
    //  document.create(img)
        
    new Vue({
        el: '#root',
        //数据
        data: {
            // 定义一个数组
            list:[{id:1,name:"马超"},{id:2,name:"艺哥"},{id:3,name:"凤林"},{id:4,name:"才智"},{id:5,name:"许梦"}],
            obj:{
                id:1,
                name:"天亮教育",
                address:"方大科技园"
            }
        },
        methods: {}
    })
</script>

</html>